add option submits_with to button #783
Conversation
lcreid
left a comment
lcreid
left a comment
There was a problem hiding this comment.
Thanks for this PR. This is a lot like what I was describing in your previous PR.
I really like the idea of making it easier to put up a spinner. I will confess that I hadn't even considered how to do this (I don't do enough front-end work these days). At the same time, I think we should think a lot about how to add new features, so we don't end up committing ourselves to supporting something that turns out not to be what most users need.
With that in mind, I wonder what you about trying to reduce the scope of this PR a bit? What I'm thinking is that instead of a new parameter for f.button or f.primary, we just provide a helper that only generates this HTML for a spinner, and let the user code the data-turbo-submits-with attribute themself. Something like:
f.button("Save", data: { turbo_submits_with: f.spinner })
This would allow us in the future to make the default spinner more configurable (e.g. with keyword parameters with defaults), without breaking existing applications that were happy with the default spinner.
What do you think?
Also, you're right that we should have an example and screenshot for the documentation. Please add that if you feel you a can figure out how from the existing examples. If run into trouble, feel free to ask me for help.
| module Submit | ||
| def button(value=nil, options={}, &) | ||
| if options.key? :submits_with | ||
| options[:data] = { turbo_submits_with: setup_turbo_submit(options[:submits_with]) } |
There was a problem hiding this comment.
I think this should merge with options[:data], in case the user specifies other data- attributes.
| expected = <<~HTML | ||
| <button class="btn btn-secondary" data-turbo-submits-with="<div class="spinner-border d-block mx-auto" role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div>" name="button" type="submit">Submit with Spinner</button> | ||
| HTML |
There was a problem hiding this comment.
The expected HTML should not be escaped.
| <<~HTML.strip | ||
| <div class="spinner-border d-block mx-auto" role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div> | ||
| HTML |
There was a problem hiding this comment.
I think you want to wrap this in raw so the HTML doesn't get escaped.
| <<~HTML.strip | |
| <div class="spinner-border d-block mx-auto" role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div> | |
| HTML | |
| raw(<<~HTML.strip) | |
| <div class="spinner-border d-block mx-auto" role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div> | |
| HTML |
(I think the above is correct, but I don't guarantee it. :-) )
| <button class="btn btn-secondary" data-turbo-submits-with="<div class="spinner-border d-block mx-auto"; role="status" style="--bs-spinner-width: 1lh; --bs-spinner-height: 1lh;"></div>" name="button" type="submit">Save</button> | ||
| ``` | ||
|
|
||
| Use `submits_with: :spinner` to render a default bootstrap spinner or pass your own HTML. |
There was a problem hiding this comment.
It would be nice to show an example where the user provides the HTML.
| ``` | ||
|
|
||
| Use `submits_with: :spinner` to render a default bootstrap spinner or pass your own HTML. | ||
| This only works on `f.button` or `f.primary` not on `f.submit` and forces `render_as_button: true` on `f.primary`. |
There was a problem hiding this comment.
I would move this line up to near the top of this section, because some of us don't read the whole section before we start coding. ;-)
| (some unimportant HTML attributes have been removed for simplicity) | ||
|
|
||
| ### Turbo submits with | ||
| There is a turbo attribute [(data-turbo-submits-with)](https://turbo.hotwired.dev/reference/attributes) that replaces the content of a submit button while the request is processing. |
There was a problem hiding this comment.
| There is a turbo attribute [(data-turbo-submits-with)](https://turbo.hotwired.dev/reference/attributes) that replaces the content of a submit button while the request is processing. | |
| There is a turbo attribute [(data-turbo-submits-with)](https://turbo.hotwired.dev/reference/attributes) that replaces the content of a submit button while the request is processing. You can have `bootstrap_form` put up a spinner while the request is processing with the following: |
2 participants
as discussed here #781
@lcreid what do you think?
Also should there be a screenshot in den README?